import GeekIcon from "@shared/geekIcon";
import { Link, useLocation, useParams } from "react-router-dom";
import styles from "@styles/tabbar.module.less";

export default function Tabbar() {
  // 获取到当前路由请求路径 pathname
  const { pathname } = useLocation();
  // 使用 useParams 钩子获取路由参数
  const { cid } = useParams();
  // 判断是否在首页
  const isHome = typeof cid !== "undefined";
  // 判断是否在问答页面
  const isQuestion = pathname === "/question";
  // 判断是否在视频页面
  const isVideo = pathname === "/video";
  // 判断是否在我的页面
  const isMine = pathname === "/mine";

  return (
    <div className={styles.tabbar}>
      {/* 首页链接 */}
      <Link to="/" className={isHome ? styles.active : ""}>
        <GeekIcon
          type={isHome ? "iconbtn_home_sel" : "iconbtn_home"}
          className={styles.icon}
        />
        <span>首页</span>
      </Link>
      {/* 问答页面链接 */}
      <Link to="/question" className={isQuestion ? styles.active : ""}>
        <GeekIcon
          type={isQuestion ? "iconbtn_qa_sel" : "iconbtn_qa"}
          className={styles.icon}
        />
        <span>问答</span>
      </Link>
      {/* 视频页面链接 */}
      <Link to="/video" className={isVideo ? styles.active : ""}>
        <GeekIcon
          type={isVideo ? "iconbtn_video_sel" : "iconbtn_video"}
          className={styles.icon}
        />
        <span>视频</span>
      </Link>
      {/* 我的页面链接 */}
      <Link to="/mine" className={isMine ? styles.active : ""}>
        <GeekIcon
          type={isMine ? "iconbtn_mine_sel" : "iconbtn_mine"}
          className={styles.icon}
        />
        <span>我的</span>
      </Link>
    </div>
  );
}
